<template>
  <BasicModal width="800px" @register="register"
              title="详情" @ok.stop="handleSubmit">
    <BasicForm @register="registerForm" />

    <a-table :columns="columns" :data-source="logModel.details" size="small"
             bordered row-key="id" :pagination="false" :scroll="{y :400}">
      <template #messageSlot="{record}">
        <TypographyParagraph
          :style="{ width: '300px' }"
          :ellipsis=" { tooltip: record.message }"
          :content="record.message" />
      </template>
    </a-table>
  </BasicModal>
</template>
<script setup>
import { BasicModal, useModal } from "@/components/Modal";
import { defHttp } from "@/utils/http/axios";
import { ref } from "vue";
import { BasicForm, useForm } from "@/components/Form";
import { TypographyParagraph } from "ant-design-vue";

defineOptions({ name: "LogModal" });
const [register, { closeModal, openModal, setModalProps }] = useModal();

function setData({ id }) {
  openModal();
  loadDetail(id);
}

const columns = [
  {
    dataIndex: "unitName",
    title: "单位名称"
  },
  {
    dataIndex: "year",
    title: "年度"
  },
  {
    dataIndex: "message",
    title: "日志",
    slots: { customRender: "messageSlot" }
  },
  {
    dataIndex: "createTime",
    title: '创建时间'
  }
];

const [registerForm, {
  getFieldsValue,
  resetFields,
  validateFields,
  setFieldsValue,
  validate
}] = useForm({
  labelWidth: 150,
  schemas: [
    {
      field: "jobName",
      label: "任务名称",
      component: "Input",
      componentProps: {
        disabled: true
      }
    },
    {
      field: "createTime",
      label: "采集日期",
      component: "Input",
      componentProps: {
        disabled: true
      }
    }
  ],
  showActionButtonGroup: false
});

const logModel = ref({
  details: []
});

function loadDetail(id) {
  setModalProps({confirmLoading: true})
  defHttp.get({
    url: "/cwqs/cwqsLog/queryById",
    params: { id }
  }, { joinParamsToUrl: true }).then(data => {
    if (!data.details) data.details = [];
    logModel.value = data;
    setFieldsValue(data)
    setModalProps({confirmLoading: false})
  }).catch(e => {
    setModalProps({confirmLoading: false})
  })
}

function handleSubmit() {
  closeModal();
}

defineExpose({
  setData
});
</script>
